<template>
  <div>

  <el-row type="flex">
    <el-col>
      <el-row type="flex">
        <el-col>
          <p style="color: red">投递总数:{{feedback.count}}</p>
          <p style="color: #77e877">通过数:{{pass}}</p>
        </el-col>
        <el-col>
          <div v-if="feedback.count!=0" style="background-color: red;width: 200px;height: 21px;margin: 16px 0"></div>
          <div style="background-color: #77e877;height: 21px;margin: 16px 0"
          :style="{
            width:2*p+'px'
          }"></div>
        </el-col>
      </el-row>
    </el-col>
    <el-col>
      <el-progress type="circle" :percentage="p" color="#77e877"></el-progress>
      <p>通过率</p>
    </el-col>
  </el-row>
  <el-row type="flex" v-for="i in feedback.record">
    <el-col>
      <p>
        {{i.companyName}}
      </p>
    </el-col>
    <el-col>
      <p>
        {{i.jobName}}
      </p>
    </el-col>
    <el-col>
      <div>
        <p v-if="i.state==-1" style="color: red">
          已拒绝
        </p>
        <p v-else style="color: #77e877">
          已通过初筛
        </p>
        <p class="time">
          {{i.date}}
        </p>
      </div>
    </el-col>
  </el-row>
  </div>
</template>

<script>
import user_js from "@/utils/api/user";

export default {
  name: "Feedback",
  data(){
    return{
      feedback:{
        count:'9',
        record:[1]
      }
    }
  },
  computed:{
    p(){
      var t=this.pass
      var t2=this.feedback.count-'0'
      if(t2==0)return 0
      return Math.floor(t*100/t2)
    },
    pass(){
      var rej=0
      this.feedback.record.forEach(i=>{
        if(i.state==-1){
          rej++
        }
      })
      return this.feedback.record.length-rej
    }
  }
  ,
  mounted() {
    this.init()
  },
  methods:{
    async init() {
      const  res=await user_js.feedback().then(res=>{
        return res.data.data
      })
      this.feedback=res
    }
  }
}
</script>

<style scoped>

.time{
  text-align: right;
  font-size: 10px;
}
</style>